<!--
 * @FileDescription: 注册页面
 * @Author: shy, lym
 * @Date: 2022-02-25
 * @LastEditors: lym
 * @LastEditTime: 2022-03-02
 -->

<template>
  <div id="building">
    <div class="signup-container">
      <el-form :model="ruleForm1" :rules="rules1"
               status-icon
               ref="ruleForm1"
               label-position="left"
               label-width="0px"
               class="demo-ruleForm signup-page">
        <el-form-item style="height:50%; position: absolute; top:-80px">
          <el-button type="text" @click="returnToLogin"><div class="fa fa-arrow-left"/>&emsp;返回登录</el-button>
        </el-form-item>
        <img src='https://pic.imgdb.cn/item/621c26082ab3f51d91c6a8bf.jpg' width="128" height="128">
        <h3 class="title" font="PingFang SC">欢迎来到EasyImage</h3>
        <el-form-item prop="username">
          <el-input type="text"
                    v-model="ruleForm1.username"
                    auto-complete="off"
                    placeholder="请输入用户名"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password"
                    v-model="ruleForm1.password"
                    auto-complete="off"
                    placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <el-form-item prop="re_password">
          <el-input type="password"
                    v-model="ruleForm1.re_password"
                    auto-complete="off"
                    placeholder="请再次输入密码"
          ></el-input>
        </el-form-item>
        <el-checkbox v-model="checked" class="check_style">
          创建EasyImage账号时，我同意遵守
        </el-checkbox>
        <!--          <el-link type="primary" @click="privacyRedirect" target="_blank">《隐私协议》</el-link>-->
        <el-button type="text" @click="privacyRedirect" target="_blank">《隐私协议》</el-button>
        <br>
        <br>
        <el-form-item style="width:100%;">
          <el-button type="primary" style="width:100%;" @click="handleSubmit" :loading="logining">注册</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import {get} from "@/utils/http";
import {ElMessage} from "element-plus";

export default {
  name: 'UserSignup',
  data() {
    return {
      ruleForm1: {
        username: '',
        password: '',
        re_password: '',
      }, // 注册表单
      rules1: {
        username: [{required: true, message: '用户名不能为空', trigger: 'blur'}],
        password: [{required: true, message: '密码不能为空', trigger: 'blur'}],
        re_password: [{required: true, message: '请再次输入密码', trigger: 'blur'}]
      }, // 注册校验规则
      checked: false // 是否同意遵守隐私协议
    }
  },
  created() {
    let footer = document.getElementById('footer')
    footer.innerHTML = ""
  },
  methods: {
    /**
     * @description: 点击“注册”按钮，完成用户注册
     * @param {无} 无
     * @return void
     */
    handleSubmit() {
      let that = this;
      this.$refs.ruleForm1.validate((valid) => {
        if (valid) {
          // 是否遵守隐私协议
          if (that.checked === true) {
            // 两次密码输入是否相等
            if (this.ruleForm1.password === this.ruleForm1.re_password) {
              get('/register', {
                username: that.ruleForm1.username,
                password: that.ruleForm1.password
              }).then(function (res) {
                    if (res.code === 1) {
                      // 跳转登录页面
                      let router_target = "UserLogin";
                      that.$router.push({
                        name: router_target
                      })
                      ElMessage.success({
                        showClose: true,
                        message: "注册成功，欢迎您 " + that.ruleForm1.username,
                        type: "success",
                        center: true
                      })
                    } else {
                      ElMessage.error({
                        showClose: true,
                        message: "对不起，该用户已经存在，请更换用户名",
                        type: "error",
                        center: true
                      });
                    }
                  }
              )
            } else {
              ElMessage.error({
                showClose: true,
                message: "两次输入的密码不一致，请重新输入",
                type: "error",
                center: true
              });
            }


          } else {
            ElMessage.warning({
              showClose: true,
              message: "请先勾选同意协议",
              type: "warning",
              center: true
            });
          }


        }
      })
    },

    /**
     * @description: 点击“隐私协议”链接，跳转隐私协议页面
     * @param {无} 无
     * @return void
     */
    privacyRedirect() {
      let that = this;
      let router_target = "PrivacyStatement";
      that.$router.push({
        name: router_target
      })
    },
    returnToLogin() {
      let that = this;
      let router_target = "UserLogin";
      that.$router.push({
        name: router_target
      })
    }
  },
};
</script>

<style scoped>
.signup-container {
  width: 100%;
  height: 100%;
}

.signup-page {
  -webkit-border-radius: 5px;
  border-radius: 5px;
  position: absolute;
  top: 15%;
  left: 65%;
  width: 350px;
  padding: 35px 35px 15px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
  opacity: 0.7
}

#building {
  background: url("https://pic.imgdb.cn/item/6219c1002ab3f51d91bd16db.jpg");
  width: calc(100% + 30px);
  height: calc(100% + 30px);
  position: fixed;
  background-size: 100% 100%;
  margin: -8px -8px;
}
</style>


